<template>
  <div
    class="mvs"
    ref="mvs"
  >
    <!-- 选项部分开始 -->
    <div class="option-list">
      <Tabsmy
        :tabName="area"
        :tabs="areaTabs"
        v-model="areaActiveIndex"
      />
      <Tabsmy
        :tabName="type"
        :tabs="typeTabs"
        v-model="typeActiveIndex"
      />
      <Tabsmy
        :tabName="sort"
        :tabs="sortTabs"
        v-model="sortActiveIndex"
      />
    </div>
    <!-- 选项部分结束 -->
    <!-- mv列表开始 -->
    <div class="mv-list">
      <div class="mv-list-content">
        <ul class="clearfix">
          <li
            class="mv-cover"
            v-for="(item , index) in result.data"
            :key="index"
          >
            <div class="mv-block">
              <img :src="$utils.genImgUrl(item.cover, 500, 260)">
              <div
                class="play-button iconfont icon-play"
                @click="goMv(item.id)"
              ></div>
              <div class="play-num">{{item.playCount}}</div>
              <div class="play-time">15:13</div>
            </div>
            <div class="mv-bottom">
              <div class="mv-title">{{item.name}}</div>
              <div class="mv-author">{{item.artistName}}</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- mv列表结束 -->
    <!-- 分页开始 -->
    <div class="page-change">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      >
      </el-pagination>
    </div>
    <!-- 分页结束 -->
    <!-- ε=(´ο｀*)))唉  这种用法前所未有 本人自创。目的是为了触发计算属性getDataParams -->
    <div style="display:none">
      {{getDataParams}}
    </div>

  </div>
</template>

<script type="text/ecmascript-6">
import { getAllMvs } from "@/api"
import { getPageOffset, scrollInto } from "@/utils"
const areaTabs = ["全部", "内地", "港台", "欧美", "日本", "韩国"]
const typeTabs = ["全部", "官方版", "原声", "现场版", "网易出品"]
const sortTabs = ["上升最快", "最热", "最新"]
export default {
  data() {
    return {
      area: '地区',
      type: '类型',
      sort: '排序',
      areaActiveIndex: 0,
      typeActiveIndex: 0,
      sortActiveIndex: 0,
      limit: 12,
      currentPage: 0,
      result: {
      },
      params: {
      }
    }
  },
  async created() {
    this.areaTabs = areaTabs
    this.typeTabs = typeTabs
    this.sortTabs = sortTabs
    this.areaActiveIndex = 0
    this.typeActiveIndex = 0
    this.sortActiveIndex = 0
    this.limit = 12
  },
  methods: {
    handleSizeChange(pageSize) {
      console.log(pageSize)
    },
    handleCurrentChange(pageIndex) {
      this.currentPage = pageIndex
      scrollInto(this.$refs.mvs)
    },
    goMv(id) {
      console.log(id)
      this.$router.push(`/mv/${id}`)
    }
  },
  watch: {
    params: {
      deep: true,
      async handler() {
        this.result = await getAllMvs({
          limit: this.limit,
          offset: getPageOffset(this.currentPage, this.limit),
          area: areaTabs[this.areaActiveIndex],
          order: sortTabs[this.typeActiveIndex],
          type: typeTabs[this.sortActiveIndex]
        })
        console.log(this.result.data)
      }
    },
    areaActiveIndex: {
      deep: true,
      handler() {

      }
    }
  },
  computed: {
    getDataParams() {
      console.log('33333333')
      let currentPage = this.currentPage
      return this.params = {
        area: areaTabs[this.areaActiveIndex],
        order: sortTabs[this.typeActiveIndex],
        type: typeTabs[this.sortActiveIndex]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.option-list {
  padding-left: 2rem;
  padding-top: 1.5rem;
}
.mv-list {
  padding-left: 2rem;
}
.mv-list-content {
  & > ul {
    & > .mv-cover {
      &:hover .play-button {
        display: block;
      }
      display: block;
      position: relative;
      float: left;

      margin-right: 1rem;
      margin-top: 1rem;
      .play-button {
        display: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: red;
        font-size: 2.2rem;
        background-color: rgba(255, 255, 255, 0.5);
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        line-height: 3rem;
        text-align: center;
        cursor: pointer;
      }
      & img {
        width: 16rem;
        height: 9rem;
      }
      .play-num {
        position: absolute;
        right: 5px;
        top: 5px;
        color: #fff;
      }
      .play-time {
        position: absolute;
        right: 5px;
        bottom: 5px;
        color: #fff;
      }
    }
  }
}
.mv-block {
  width: 16rem;
  height: 9rem;
  border-radius: 0.5rem;
  overflow: hidden;
  position: relative;
}
.mv-bottom {
  .mv-title {
    margin-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 16rem;
  }
  .mv-author {
    color: #d8bfd8;
    margin-bottom: 10px;
  }
}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}
// 分页开始
.page-change {
  padding-left: 2rem;
  padding-top: 2rem;
}
</style>